সিএসএস স্যাস (CSS SASS)

স্যাস (Syntactically Awesome Stylesheets) একটি প্রি-প্রসেসর (preprocessor) যা সিএসএস (CSS)-এর সাথে কাজ করার ক্ষমতা এবং গঠনশীলতা বৃদ্ধি করে। এটি সিএসএস ফাইলের কোডিং স্ট্রাকচার সহজতর করে এবং পুনরায় ব্যবহারযোগ্য কোড তৈরির জন্য সুবিধা প্রদান করে। স্যাস আসলে সিএসএস-এর একটি এক্সটেনশন, যা আরও দ্রুত এবং কার্যকর ওয়েব ডিজাইনের জন্য ব্যবহৃত হয়।

স্যাসের বৈশিষ্ট্য

ভেরিয়েবলস (Variables)

স্যাসে ভেরিয়েবল ব্যবহার করে পুনরায় ব্যবহারযোগ্য স্টাইল ডিফাইন করা যায়। উদাহরণস্বরূপ:

$primary-color: #3498db;

button {
  background-color: $primary-color;
  color: white;
}

নেস্টিং (Nesting)

স্যাসে নেস্টিং ব্যবহার করে কোডকে সংক্ষিপ্ত এবং সুসংগঠিত করা যায়। উদাহরণ:

nav {
  ul {
    list-style: none;
    li {
      display: inline-block;
    }
  }
}

মিক্সইনস (Mixins)

মিক্সইনস এমন ফাংশন যা বারবার ব্যবহারযোগ্য স্টাইলের সেট তৈরি করতে সাহায্য করে। উদাহরণ:

@mixin border-radius($radius) {
  border-radius: $radius;
  -webkit-border-radius: $radius;
}

button {
  @include border-radius(10px);
}

পার্শিয়ালস এবং ইমপোর্ট (Partials and Import)

স্যাসে _ দিয়ে শুরু হওয়া ফাইলগুলোকে পার্শিয়াল বলা হয়। এগুলো সাধারণত প্রধান স্যাস ফাইলের মাধ্যমে @import করে ব্যবহার করা হয়। উদাহরণ:

_variables.scss

$primary-color: #3498db;

main.scss

@import 'variables';

body {
  background-color: $primary-color;
}

এক্সটেন্ড/ইনহেরিটেন্স (Extend/Inheritance)

স্যাসে ইনহেরিটেন্স ব্যবহার করে একই স্টাইল একাধিক সিলেক্টরে প্রয়োগ করা যায়। উদাহরণ:

%button-style {
  padding: 10px 15px;
  border: none;
  cursor: pointer;
}

.button-primary {
  @extend %button-style;
  background-color: #3498db;
  color: white;
}

স্যাস ইনস্টল এবং ব্যবহার

ইনস্টলেশন

স্যাস ব্যবহার করতে হলে আপনার সিস্টেমে node.js এবং npm (Node Package Manager) ইনস্টল থাকতে হবে। টার্মিনালে নিম্নলিখিত কমান্ড ব্যবহার করে স্যাস ইনস্টল করা যায়:

npm install -g sass

স্যাস ফাইল কম্পাইল করা

স্যাস ফাইল (.scss) থেকে সিএসএস ফাইল (.css) তৈরি করতে কম্পাইলিং করতে হয়। উদাহরণ:

sass input.scss output.css

ওয়াচ মোড

ওয়াচ মোড ব্যবহার করে স্যাস ফাইলের পরিবর্তনগুলো রিয়েল-টাইমে সিএসএস ফাইলে আপডেট করা যায়:

sass --watch input.scss:output.css

স্যাস বনাম সিএসএস

কেন স্যাস ব্যবহার করবেন?

• কোড পুনরায় ব্যবহারযোগ্য এবং সুগঠিত।
• বড় প্রজেক্টে সময় এবং প্রচেষ্টা সাশ্রয় হয়।
• ডেভেলপারদের জন্য জটিল সিএসএস ম্যানেজ করা সহজ হয়।
• কোডে কোনো পরিবর্তন করলে তা দ্রুত আপডেট করা যায়।

স্যাস (SASS) কীভাবে কাজ করে?

স্যাস কাজ করে একটি প্রি-প্রসেসর হিসেবে, যা .scss বা .sass ফাইলকে সাধারণ .css ফাইলে কম্পাইল করে। এই কম্পাইল করার প্রক্রিয়ার মাধ্যমে স্যাস ফাইলের সব জটিল স্ট্রাকচার, ভেরিয়েবল, মিক্সইন, এবং নেস্টেড স্টাইলগুলোকে সাধারণ সিএসএস-এ রূপান্তরিত করা হয়। স্যাস দুইটি সিনট্যাক্স সমর্থন করে:

1. SCSS (Sassy CSS): এটি সিএসএস-এর মতো দেখতে এবং আরো জনপ্রিয়।
2. Indented Syntax: এটি পুরোনো স্টাইল এবং এতে {} এবং ; ব্যবহার না করে ইনডেন্টেশন ব্যবহার করা হয়।

স্যাস সিনট্যাক্সের উদাহরণ

SCSS উদাহরণ

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

Indented Syntax উদাহরণ

$font-stack: Helvetica, sans-serif
$primary-color: #333

body
  font: 100% $font-stack
  color: $primary-color

স্যাসের উন্নত বৈশিষ্ট্য

ফাংশন (Functions)

স্যাসে বিল্ট-ইন ফাংশন রয়েছে, যা স্টাইল শারীরিকভাবে ডায়নামিক করতে সাহায্য করে। উদাহরণ:

$base-color: #3498db;

button {
  background-color: lighten($base-color, 20%);
  color: darken($base-color, 10%);
}

অপারেশন (Operations)

স্যাসে গাণিতিক অপারেশন করা সম্ভব, যা ডায়নামিক স্টাইল তৈরি করতে সাহায্য করে। উদাহরণ:

$base-font-size: 16px;

body {
  font-size: $base-font-size * 1.5; // 24px
}

লুপ (Loops)

স্যাসে লুপ ব্যবহার করে পুনরাবৃত্ত স্টাইল তৈরি করা যায়। উদাহরণ:

@for $i from 1 through 5 {
  .item-#{$i} {
    width: 20px * $i;
  }
}

কন্ডিশনাল (Conditionals)

স্যাসে @if এবং @else ব্যবহার করে শর্ত অনুযায়ী স্টাইল নির্ধারণ করা যায়। উদাহরণ:

$theme: light;

body {
  @if $theme == light {
    background-color: white;
    color: black;
  } @else {
    background-color: black;
    color: white;
  }
}

বাস্তব উদাহরণ

ডাইনামিক রেস্পন্সিভ ডিজাইন

স্যাস ব্যবহার করে রেস্পন্সিভ ব্রেকপয়েন্ট খুব সহজে সেট করা যায়। উদাহরণ:

$breakpoints: (
  small: 600px,
  medium: 768px,
  large: 1024px
);

@each $label, $size in $breakpoints {
  @media (min-width: $size) {
    body.#{$label} {
      font-size: $size / 100 + px;
    }
  }
}

রঙের প্যালেট ম্যানেজমেন্ট

প্রজেক্টে রঙের প্যালেট সহজে ম্যানেজ করার জন্য স্যাস খুব কার্যকর। উদাহরণ:

$colors: (
  primary: #3498db,
  secondary: #2ecc71,
  danger: #e74c3c
);

.button {
  @each $name, $color in $colors {
    &--#{$name} {
      background-color: $color;
    }
  }
}

স্যাস সেটআপের উন্নত পদ্ধতি

গাল্প (Gulp) দিয়ে স্যাস কম্পাইল করা

গাল্প একটি টাস্ক রানার যা স্বয়ংক্রিয়ভাবে স্যাস কম্পাইল করতে পারে। উদাহরণ:

Gulpfile.js:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('./scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
  gulp.watch('./scss/**/*.scss', gulp.series('sass'));
});

স্যাস CLI ব্যবহার

টার্মিনালে সরাসরি স্যাস কম্পাইল করার জন্য CLI ব্যবহার করা যায়:

sass --watch scss:css

স্যাসের সুবিধা

• কোড সংক্ষিপ্ত এবং পুনরায় ব্যবহারযোগ্য: ভেরিয়েবল, মিক্সইন, এবং নেস্টিং কোড কম এবং কার্যকর রাখে।
• বড় প্রজেক্ট ম্যানেজমেন্ট সহজ: পার্শিয়ালস এবং মডিউলার কোড ব্যবস্থাপনা সহজতর করে।
• রেস্পন্সিভ ডিজাইনে কার্যকর: ব্রেকপয়েন্ট এবং ডাইনামিক স্টাইল সহজে যোগ করা যায়।
• ডেভেলপার ফ্রেন্ডলি: সহজ কোডিং স্টাইল এবং উন্নত ডিবাগিং সুবিধা।